/*
 * @Description: 媒体锚点弹窗
 * @Author: ZzT
 * @Date: 2023-03-06 13:54:28
 * @LastEditTime: 2023-03-07 09:27:03
 */
import JPModal from '@/components/JPComponents/JPModal';
import { delItemById, insertItemAfter, updateItemById } from '@/utils/list';
import { Image, Button, Card, Divider, List, Tag, Input } from 'antd';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import { throttle } from 'lodash-es';
import { useState } from 'react';
import styles from '../../styles/medium.module.scss';
import { mediaAnchorSave } from '@/api/search';

const cx = classNames.bind(styles);
const { Meta } = Card;

const MediumPoint = (props: any) => {
  const { visible, onClose, data, baseInfo, entityId } = props;
  const [anchors, setAnchors] = useState([]);
  /* 点击将节点添加到右侧 */
  const setData = (data: any) => {
    setAnchors((state: any) => {
      if (state.find((item: any) => item.timeline === data.timeline)) {
        return state;
      } else return insertItemAfter(data, state);
    });
  };
  /* 文字添加进右侧对应条目 */
  const getMessage = throttle((data: any) => {
    const { item, evt } = data;
    item.description = evt.target.value;
    setAnchors((state) => updateItemById(item.timeline, item, state, 'timeline'));
  }, 1000);

  const onFinsh = () => {
    const params = {
      anchors,
      archiveTypeId: baseInfo.archiveTypeId,
      dbName: baseInfo.dbName,
      entityId
    };
    mediaAnchorSave(params).then(() => onClose());
    console.log('finsh', anchors, baseInfo, entityId);
  };
  return (
    <>
      <JPModal
        visible={visible}
        title="媒体锚点"
        onCancel={onClose}
        width={800}
        footer={[
          <Button key={'close'}>取消</Button>,
          <Button key={'submit'} type="primary" onClick={() => onFinsh()}>
            确定
          </Button>
        ]}
      >
        ①点击解析，系统自动解析音视频，生成音视频锚点
        <p>②点选片段加入“锚点描述”区并加入描述性信息</p>
        <Divider />
        <div className={cx('point')}>
          <div className={cx('point-left')}>
            <div className={cx('title-bew')}>
              <b>①待选锚点</b>
              <Button type="link">解析音/视频</Button>
            </div>
            <div className={cx('card-grid')}>
              {data?.map((item: any) => (
                <Card
                  key={item.timeline}
                  onClick={() => setData(item)}
                  hoverable
                  cover={
                    <div className={cx('img1')}>
                      <Image rootClassName={cx('imageDown')} src={item.url} />
                    </div>
                  }
                >
                  <Meta
                    avatar={
                      <Tag color={'#666666'}>
                        {dayjs(0).second(item.timeline).minute() &&
                          `${dayjs(0).second(item.timeline).minute()}分`}
                        {dayjs(0).second(item.timeline).second()}秒
                      </Tag>
                    }
                  />
                </Card>
              ))}
            </div>
          </div>
          <Divider type="vertical" className={cx('height')} />
          <div className={cx('point-right')}>
            <div className={cx('title-bew')}>
              <b>②已选媒体锚点</b>
              <Button type="link" onClick={() => setAnchors([])}>
                一键清空
              </Button>
            </div>
            <List
              className={cx('list-grid')}
              itemLayout="horizontal"
              dataSource={anchors}
              rowKey="timeline"
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <div className={cx('img')}>
                        <Image rootClassName={cx('imageDown')} src={item.url} />
                      </div>
                    }
                    title={
                      <div className={cx('title-bew')}>
                        <b>时间锚点</b>
                        <Button
                          type="link"
                          onClick={() =>
                            setAnchors((state) => delItemById(item.timeline, state, 'timeline'))
                          }
                        >
                          移出
                        </Button>
                      </div>
                    }
                    description={
                      <Input.TextArea
                        value={item.description}
                        placeholder="请填写描述信息"
                        onChange={(evt) => {
                          getMessage({ item, evt });
                        }}
                      ></Input.TextArea>
                    }
                  />
                </List.Item>
              )}
            />
          </div>
        </div>
      </JPModal>
    </>
  );
};
export default MediumPoint;
